<template>
	<view class="goods-list">
		<view class="goods-img" @tap="goGoodsDetail">
			<image :src="item.img" class="img" />
		</view>
		
		<view class="goods-content" @tap="goGoodsDetail">
			<view class="goods-name">
				{{item.goodsName}}
			</view>
			<view class="price-box" @tap="goGoodsDetail">
				<text class="price-text">￥  {{item.price}}</text>
				<text class="del-price">￥ {{item.marketPrice}}</text>
			</view>
			<view class="shop-name" @tap="goShopDetail">
				{{item.storeName}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"indexGoodsList",
		props:{
			item:{
				type:Object,
				default:{}
			}
		},
		methods:{
			goGoodsDetail(){
				let query = `?id=${this.item.id}`
				uni.navigateTo({
					url:"/pages/goods/detail" + query,
				})
			},
			goShopDetail(){
				uni.navigateTo({
					url:"/pages/shop/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-list{
		width: 100%;
		.goods-img{
			width: 100%;
			height: 45vw;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 12rpx 12rpx 0 0;
			}
		}
		.goods-content{
			padding: 14rpx;
		}
		.goods-name{
			font-size: 24rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			font-weight: bold;
			height: 70rpx;
		}
		.price-box{
			margin-top: 14rpx;
			line-height: 1.3;
			.price-text{
				font-size: 32rpx;
				color: #fa436a;
				font-weight: bold;
			}
			.del-price{
				font-size: 22rpx;
				color: #a0a0a0;
				text-decoration: line-through;
				padding-left: 14rpx;
				
			}
			
		}
		.shop-name{
			color: #999999;
			font-size: 24rpx;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
	}
</style>
